{% extends 'base_templates/base.html' %}

{% block title %}{{ goods.name }}{% endblock %}

{% block breadcrumb %}
    <div class="container">
        <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
            <ul>
                <li><a href="{% url 'goods:index' %}">首页</a></li>
                <li><a href="{% url 'goods:list' goods.goods_type.logo 1 %}">{{ goods.goods_type.name }}</a></li>
                <li class="is-active">{{ goods.name }}</li>
            </ul>
        </nav>
    </div>
{% endblock breadcrumb %}

{% block container %}
    <div class="columns">
        <div class="column is-3">
            <style>
                [v-cloak] {
                    display: none;
                }
                .is-active .al img {
                    filter: grayscale(0%);
                }
                .al img {
                    filter: grayscale(100%);
                }
            </style>
            <div id="banners">
                {{ goods_images|json_script }}
                <div id="banners-data"></div>
                <b-carousel :indicator-inside="false">
                    <b-carousel-item v-for="item in bannersDatas">
                        <b-image class="image" ratio="1by1" :src="getImgUrl(item.img)"></b-image>
                    </b-carousel-item>
                    <template #indicators="props">
                        <b-image class="al image" :src="getImgUrl(bannersDatas[props.i].img)"></b-image>
                    </template>
                </b-carousel>
            </div>
            <script>
                var banner_data_element = document.getElementById('banners-data');
                var bannersDatas = JSON.parse(banner_data_element.previousElementSibling.textContent);
                var banners = new Vue({
                    el: "#banners",
                    delimiters: ['{$', '$}'],
                    data: {
                        bannersDatas
                    },
                    methods: {
                        getImgUrl(value) {
                            return `${value}`
                        },
                    },
                })
            </script>
        </div>
        <div class="column">
            <h1 class="is-size-5 has-text-justified has-text-weight-bold mb-2">{{ goods.name }}</h1>
            <div id="product">
                {{ product_data|json_script }}
                <div id="product-data"></div>
                {{ specs_data|json_script }}
                <div id="specs-data"></div>
                <div class="box is-marginless is-radiusless has-background-primary-dark has-text-white-ter">
                    <div class="is-flex is-justify-content-space-between is-align-items-center">
                        <div>
                            <span class="is-size-7">价格：</span>
                            <h1 class="is-size-4">¥ {$ sku.price $}</h1>
                        </div>
                        <div class=" has-text-centered">
                            {$ sku.sales $}
                            <h1>销量</h1>
                        </div>
                    </div>
                </div>

                <!-- specs规格数据获取 -->
                <div class="box is-radiusless is-marginless">
                    <div class="is-flex is-align-items-center" v-for="spec, index in specsData" style="height:40px;">
                        <div class="has-text-grey-light">{$ spec.name $}：</div>
                        <div class="is-flex is-flex-wrap-wrap is-flex-grow-1">
                            <div class="mr-2" v-for="op, i in spec.class_set" :key="op.id"
                                 style="flex: 0 0 25%;">
                                <b-radio-button v-model="radioButton[index]"
                                                :native-value="op.name"
                                                size="is-small"
                                                type="is-primary is-light is-outlined">
                                    <span>{$ op.name $}</span>
                                </b-radio-button>
                            </div>
                        </div>
                    </div>

                    <!-- 数量 -->
                    <div class=" is-flex is-align-items-center mt-3">
                        <div class=" has-text-grey-light">数量：</div>
                        <div>
                            <b-numberinput
                                    controls-position="compact"
                                    min="1"
                                    :max="stock"
                                    v-model="num"
                                    size="is-small"
                                    :editable="false">
                            </b-numberinput>
                        </div>
                        <div class=" has-text-grey-dark ml-3">(库存{$ stock $})</div>
                    </div>
                    <!-- 数量end -->
                </div>

                <!-- 加入购物车按钮及一键购买 -->
                <div class="box is-radiusless">
                    <b-button
                        type="is-primary"
                        @click="addCart"
                        :disabled="stock ? false : true">
                        加入购物车
                    </b-button>
                    <b-button
                        type="is-primary"
                        :disabled="stock ? false : true"
                        @click="nowBuy"
                        outlined>
                        立即购买
                    </b-button>
                </div>
                <!-- 加入购物车按钮及一键购买 -->
                <div class="box is-radiusless mt-3">
                <b-tabs class="block">
                    <b-tab-item label="商品详情">
                        <div class="content">
                            {% for goods_image in goods_images %}
                                <p><img src="{{ goods_image.img }}" alt="{{ goods_image.img }}"></p>
                            {% endfor %}
                        </div>
                    </b-tab-item>
                    <b-tab-item label="商品评价">
                        {% if comments %}
                            <div class="is-flex is-justify-content-space-between p-2">
                                <div class="">满意度：{{ satisfy }}%</div>
                                <div class="is-flex is-align-items-center">
                                    <span> 评分：</span>
                                    <b-rate
                                        :value="{{ score }}"
                                        disabled
                                        custom-text="{{ score }}分">
                                    </b-rate>
                                </div>
                            </div>
                            <div class="dropdown-divider"></div>
                        {% endif %}
                        {% for comment in comments %}
                            <article class="media">
                                <figure class="media-left">
                                    <p class="image is-32x32">
                                        <img class="is-rounded" src="{{ comment.user.image.url }}" alt="图片异常">
                                    </p>
                                </figure>
                                <div class="media-content">
                                    <p>
                                        {{ comment.user.username }}
                                        <b-rate size="is-small" :value="{{ comment.score }}" disabled custom-text="{{ comment.score }}分"></b-rate>
                                    </p>
                                    <p class=" is-size-7">{{ comment.create_time }}</p>
                                    <p class=" has-text-grey-light">{{ comment.content }}</p>
                                </div>
                            </article>
                        {% empty %}
                            <p class=" has-text-centered has-text-danger mt-6">还没有任何评价内容哦！</p>
                        {% endfor %}
                    </b-tab-item>
                </b-tabs>
            </div>
                <!-- 详情 -->
            </div>
        </div>
        <div class="column is-2">
            <h1 class="has-text-centered has-background-white pt-3 is-size-6 pb-3 has-text-weight-bold">热销排行</h1>
            <div class=" dropdown-divider is-marginless"></div>
            {% for hot in hot_goods %}
                <div class="has-background-white">
                    <figure class="image is-1by1">
                        <a href="{% url 'goods:detail' hot.goods_sku.id %}"><img src="{{ hot.image }}"
                                                                                 alt="{{ hot.goods_sku.name }}"></a>
                    </figure>
                    <div class="is-flex-grow-1 is-flex is-flex-direction-column is-justify-content-center">
                        <p class="has-text-justified spu-title pl-3 pr-3">
                            <a href="{% url 'goods:detail' hot.goods_sku.id %}"
                               class="has-text-black-ter">{{ hot.goods_sku.name }}</a>
                        </p>
                    </div>
                    <div class="pl-2 pr-2 pb-2">
                        <div class="is-flex is-align-items-center is-justify-content-space-between">
                            <span class="is-size-5 has-text-danger-dark">¥{{ hot.price }}</span>
{#                            <span class="tag is-danger is-light is-size-7">券</span>#}
                        </div>
                        <div class="is-flex is-align-items-center is-justify-content-space-between">
                            <span class="is-size-7 has-text-grey-light">{{ hot.sales }}人付款</span>
                        </div>
                    </div>
                </div>
                <div class="dropdown-divider"></div>
            {% endfor %}
        </div>
    </div>
{% endblock %}


{% block vue %}
    <script>
        var product_element = document.getElementById('product-data');
        var specs_element = document.getElementById('specs-data');

        var specsData = JSON.parse(specs_element.previousElementSibling.textContent);
        var productData = JSON.parse(product_element.previousElementSibling.textContent);

        var product = new Vue({
            el: "#product",
            delimiters: ['{$', '$}'],
            data: {
                productData,
                specsData,
                sku: {
                    price: 0,
                    cost_price: 0,
                    sales: 0,
                    stock: 0,
                },
                num: 1,
                stock: 0,
                radioButton: [],
                watchProductDatas: {}
            },
            created() {
                this.getProduct()
            },
            methods: {
                getProduct() {
                    if (this.productData.length > 0) {
                        this.watchProduct()
                        let sku_item = this.productData[0]
                        let ops = this.getOpsName(sku_item.options)
                        // 默认选中规格
                        this.sku = this.watchProductDatas[ops]
                        this.radioButton = ops.split(',')
                    }
                },

                // 整理数据
                watchProduct() {
                    this.productData.forEach(element => {
                        let ops = this.getOpsName(element.options)
                        this.watchProductDatas[ops] = element
                    });
                },

                // 获取sku规格
                getOpsName(ops) {
                    let ops_items = []
                    ops.forEach(op => {
                        ops_items.push(op.name)
                    })
                    return ops_items.join()
                },

                // 加入购物车
                addCart() {
                    request({
                        url: "{% url 'cart:add' %}",
                        method: 'post',
                        data: {
                            dynamics: this.sku.id,
                            count: this.num
                        }
                    }).then(res => {
                        if (res.data.status === 200) {
                            bayke.toastMessage('is-success', '加入购物车成功');
                            var cart_element = document.getElementById('cart_dynamic');
                            cart_element.innerText = '购物车' + '（' + String(res.data.cart_len) + '）'
                        }
                        else {
                            bayke.toastMessage("is-danger", res.data.errmsg);
                        }
                    })
                },

                // 立即购买
                nowBuy() {
                    location.href = '{% url "order:buy" %}?dynamics_id='+`${this.sku.id}&count=${this.num}`
                }
            },
            watch: {
                // 监听点击规格
                radioButton: {
                    handler: function (val) {
                        let specs = val.join()
                        let item_sku = this.watchProductDatas[specs]
                        if (item_sku) {
                            this.sku = item_sku
                            this.stock = item_sku.stock
                        } else {
                            this.stock = 0
                        }
                    },
                    immediate: true,
                    deep: true
                }
            }
        })
    </script>
{% endblock %}
    